<template>
  <div id="app">
    <!-- 需要缓存的页面在这里展示 -->
    <keep-alive>
      <router-view
        v-wechat-title="$route.meta.title"
        v-if="$route.meta.keepAlive"
      ></router-view>
    </keep-alive>
    <!-- 不需要缓存的页面在这里展示 -->
    <router-view
      v-wechat-title="$route.meta.title"
      v-if="!$route.meta.keepAlive"
    ></router-view>
    <!-- <router-view>

    </router-view> -->
  </div>
</template>

<script>
import { isAndroid } from 'vue-xiaobu-utils'
export default {
  name: 'App',
  components: {
  },
  data() {
    return {
      cid: '', // 设备cid
      mobileModel: isAndroid() ? 1 : 0, // 手机型号：0,ios 1,安卓
      mobileVersion: '', // 手机系统版本号
      appVersion: '' // app版本号
    }
  },
  mounted() {
    this.getDeviceInfo()// 获取设备信息
    this.getAppVersionInfo()// 获取版本号
  },
  methods: {
    // 获取设备信息
    getDeviceInfo() {
      // setTimeout(() => {
      //   this.cid = 'sdfsdfdfsdf'
      //   this.mobileVersion = '100'
      //   this.appVersion = '200'
      // }, 10)
      this.$System.then(System => {
        // 此处的system即为注入的插件对象，之后直接调用方法即可
        if (System) {
          System.getDeviceInfo(msg => {
            console.log('device------>')
            let deviceInfo = JSON.parse(msg)
            console.log(msg)
            this.cid = deviceInfo.cid
            this.mobileVersion = deviceInfo.ver
          })
        }
      })
    },
    // 获取版本号
    getAppVersionInfo() {
      // 获取版本号
      this.$System.then(System => {
        System.getAppVersionInfo(
          msg => {
            console.log('获取版本号:' + msg)
            let versionInfo = JSON.parse(msg)
            this.appVersion = 'version' + versionInfo.version + ' (build' + versionInfo.build + ') ' + versionInfo.type
          },
          err => {
            console.log('获取版本号失败', err)
          }
        )
      })
    }
  }
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,
body {
  height: 100%;
  display: flex;
}
/* 修复css边距合并带来的问题 */
body {
  position: absolute;
  width: 100%;
}
html {
  background-color: #fff;
}
#app {
  flex: 1;
  height: 100%;
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</style>
